<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="javascript">
</script>
	<style>
		/*注册页面*/
		.container{
			border: 1px solid rgba(255,255,255,0.3);
			margin-top: 100px;
			width: 50%;

			margin-left: 50px;

		}
		body{
			background-image: url("http://localhost:8081/images/201910280135559857.jpg");
		}
		#l1,#l2,#l3,#l4{
			color: white;
		}


	</style>
<body >
	<div class="container">
	  	<div class=""  style="width:50%; height: 60px;padding-top: 1px;">
	       <h2 align="center" style="color: white;font-size: 25px" >用户注册</h2>
	   </div>
		<br><br>
		<form  name="myform" method="post"  class="form-horizontal" role="form" >
			<div class="form-group has-success">
				<label class="col-sm-2 col-md-2 control-label" id="l1">邮箱</label>
				<div class="col-sm-4 col-md-4">
					<table style="width:100%">
						<tr>
							<td><input type="email" class="form-control"
					 placeholder="请输入您的邮箱"
					 id="email"/></td>
					 		<td>
					 			<span id="isExit"></span>
					 		</td>
						</tr>
					</table>
					<span></span>
				</div>
			</div>
	
			<div class="form-group has-success">
				  <label class="col-sm-2 col-md-2 control-label" id="l2">密码</label>
				  <div class="col-sm-4 col-md-4">
		  				<input type="password" class="form-control"
					 placeholder="请输入您的密码"  id="password"/>
					 <span ></span>
				  </div>
			 </div>
	
			<div class="form-group has-success">
				  <label class="col-sm-2 col-md-2 control-label" id="l3">确认密码</label>
				  <div class="col-sm-4 col-md-4">
		  				<input type="password" class="form-control"
					 placeholder="请输入您的密码" id="confirmPwd"/>
				  </div>
			 </div>
			<div class="form-group has-success">
				<label class="col-sm-2 col-md-2 control-label" id="l4">验证码</label>
				<div class="col-sm-2 col-md-2">
					<input type="text" class="form-control"
						   placeholder="请输入验证码" id="checkemailcode"  th:maxlength="6"/>
				</div>
				<div class="col-sm-2 col-md-2">
					<input type="button" class="btn btn-primary" value="发送邮件" id="emailBtn">
				</div>
			</div>
	
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="button"  class="btn btn-success" id="register" >注册</button>
					<button type="reset" class="btn btn-primary" >重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
<script>
	// 给 id=email 的元素添加 失去焦点事件
	// 注册时邮箱的格式验证和唯一性验证
	$("#email").blur(function (){
		// 获取用户输入的邮箱
		var email = $("#email").val();
		// 邮箱不能为空
		//  if(email == null || email == "")
		//  {
		//  	$("#isExit").text("用户名不能为空");
		//  	$("#isExit").attr("style","color:blue");
		//  	return;
		//  }
		// 发起ajax请求
		$.ajax({
			url:"/checkEmail",
			data:{"email":email},
			type:"post",
			dataType:"json",
			success:function (data){
				if(data.code == 200)
				{
					layer.msg(data.message);
				}else {
					layer.alert(data.message);
				}
			}
		})
	});
	//判断密码和确认密码是否一致
	$("#confirmPwd").blur(function (){
		// 获取密码和确认密码
		var confirmPwd = $("#confirmPwd").val();
		var password = $("#password").val();
		$.ajax({
			url:"checkPwd",
			data:{"password":password,"confirmPwd":confirmPwd},
			type:"post",
			dataType: "json",
			success:function (data){
				if(data.code == 200)
				{
					layer.msg(data.message);
				}else {
					layer.msg(data.message);
				}
			}
		})
	});
	// 发送邮箱
	$("#emailBtn").click(function (){
		var email = $("#email").val();
		$.ajax({
			url:"/sendEmail",
			data:{"email":email},
			type:"post",
			dataType:"json",
			success:function (data){
				if(data.code == 200)
				{
					layer.msg(data.message);
				}else {
					layer.msg(data.message);
				}
			}
		})
	});
	// $("#checkemailcode").blur(function (){
	// 	var emailcode = $("#checkemailcode").val();
	// 	$.ajax({
	// 		url:"/checkEmailCode",
	// 		data:{"emailCode":emailcode},
	// 		type:"post",
	// 		dataType:"json",
	// 		success:function (data){
	// 			if(data.code == 200)
	// 			{
	// 				layer.msg(data.message);
	// 			}else {
	// 				layer.msg(data.message);
	// 			}
	// 		}
	// 	})
	// });
	// 注册判断
	$("#register").click(function (){
		// 获取所有的表单数据
		var email = $("#email").val();
		var password = $("#password").val();
		var confirmPwd = $("#confirmPwd").val();
		var emailCode = $("#checkemailcode").val();
		$.ajax({
			url:"/doReg",
			data:{"email":email,"password":password,"confirmPwd":confirmPwd,"emailCode":emailCode},
			type:"post",
			dataType:"json",
			success:function (data){
				// alert("aaaaa");
				if(data.code==200)
				{
					layer.msg(data.message);
					// 定时器
					var id = setTimeout(function (){
						location.href="/login";
					},1000)
					// 停止定时器
					// clearTimeout(id)

					// 不同html 页面传值
					// localStorage.setItem("email",email);

				}else {
					layer.msg(data.message);
				}
			}
		})
		// $.ajax({
		// 	url:"/doReg",
		// 	data:{"email":email,"password":password,"confirmPwd":confirmPwd,"emailCode":emailCode},
		// 	type:"post",
		// 	dataType:"json",
		// 	success:function (data){
		// 		if(data.code==200)
		// 		{
		// 			layer.msg(data.message);
		// 			// 定时器
		// 			var id = setTimeout(function (){
		// 				location.href="/login";
		// 			},1000)
		// 			// 停止定时器
		// 			clearTimeout(id)
		// 			// 不同html 页面传值
		// 			// localStorage.setItem("email",email);
		//
		// 		}else {
		// 			layer.msg(data.message);
		// 		}
		// 	}
		// })
	});

</script>

</html>